<template>
  <ChartContainer :option="option" />
</template>

<script>
import ChartContainer from './ChartContainer.vue';

export default defineComponent({
  name: 'ChinaMap',
  components: { ChartContainer },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    toolTipData: {
      type: Array,
      default: () => []
    },
    unit: {
      type: String,
      default: ''
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    }
  },
  setup(props) {
    const mapName = 'China';

    const data = ref(props.data);
    watch(
      () => props.data,
      (val) => {
        data.value = val;
      }
    );

    const geoCoordMap = {};
    const toolTipData = ref(props.toolTipData);
    watch(
      () => props.toolTipData,
      (val) => {
        toolTipData.value = val;
      }
    );

    const convertData = (data) => {
      const res = [];
      for (let i = 0; i < data.length; i++) {
        const geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    };

    const option = computed(() => {
      return {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (typeof params.value[2] == 'undefined') {
              let toolTiphtml = '';
              for (let i = 0; i < toolTipData.value.length; i++) {
                if (params.name == toolTipData.value[i].name) {
                  toolTiphtml += toolTipData.value[i].name + '：<br>';
                  for (let j = 0; j < toolTipData.value[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData.value[i].value[j].name +
                      '：' +
                      toolTipData.value[i].value[j].value +
                      props.unit +
                      '<br>';
                  }
                }
              }
              return toolTiphtml;
            } else {
              const toolTiphtml = '';
              for (const i = 0; i < toolTipData.value.length; i++) {
                if (params.name == toolTipData.value[i].name) {
                  toolTiphtml += toolTipData.value[i].name + '：<br>';
                  for (const j = 0; j < toolTipData.value[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData.value[i].value[j].name +
                      '：' +
                      toolTipData.value[i].value[j].value +
                      props.unit +
                      '<br>';
                  }
                }
              }
              return toolTiphtml;
            }
          }
        },
        visualMap: {
          show: true,
          min: props.min,
          max: props.max,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            color: ['#1488CC', '#2B32B2'] // 浅蓝
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
          },
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            show: false
          },
          roam: true,
          itemStyle: {
            areaColor: '#031525',
            borderColor: '#3B5077',
            shadowColor: 'rgba(10,76,139,1)',
            shadowOffsetY: 0,
            shadowBlur: 60
          },
          emphasis: {
            itemStyle: {
              areaColor: '#2B91B7'
            },
            label: { show: false }
          }
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data.value),
            symbolSize: function (val) {
              return val[1] / 3;
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            emphasis: {
              label: { show: true }
            },
            itemStyle: {
              color: '#05C3F9'
            }
          },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              show: true
            },
            emphasis: {
              label: {
                show: false,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#2B91B7'
              }
            },
            roam: true,
            itemStyle: {
              areaColor: '#031525',
              borderColor: '#3B5077'
            },
            animation: false,
            data: data.value
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: function (val) {
              let a = 1;
              let b = 1;
              b = 1;
              return a * val[1] + b;
            },
            label: {
              show: true,
              formatter: function (params) {
                return params.value[2];
              }
            },
            itemStyle: {
              color: '#F62157' //标志颜色
            },
            zlevel: 6,
            data: convertData(data.value)
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(
              data.value
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function (val) {
              return val[1] / 2;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              color: 'yellow',
              shadowBlur: 10,
              shadowColor: 'yellow'
            },
            emphasis: {
              scale: [1.2, 1.2]
            },
            zlevel: 1
          }
        ]
      };
    });

    return {
      option
    };
  }
});
</script>
